<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Client</title>
</head>
<body>
<div>
    <input type="text" id="messageInput" placeholder="输入消息" />
    <button onclick="sendMessage()">发送</button>
</div>
<div id="messages"></div>

<script>
    const socket = new WebSocket("ws://localhost:8080/ws");

    socket.onopen = (event) => {
        console.log("WebSocket连接已建立");
    };

    socket.onmessage = (event) => {
        const messagesDiv = document.getElementById("messages");
        messagesDiv.innerHTML += `<p>${event.data}</p>`;
    };

    socket.onclose = (event) => {
        console.log("WebSocket连接已关闭");
    };

    function sendMessage() {
        const input = document.getElementById("messageInput");
        const message = input.value;
        socket.send(message);
        input.value = "";
    }
</script>
</body>
</html>